<!-- 
  购物车里某个商店的商品
-->
<template>
  <div class="shop" v-if="shopItem">
    <div class="shopName">
      <van-checkbox
        v-model="selectAll"
        :icon-size="iconSize"
        :value="shopItem.id"
        @click="toggleAll"
        >{{ shopItem.shopName }}</van-checkbox
      >
    </div>
    <div class="" v-for="(item, idx) in shopItem.list" :key="idx">
      <div class="pro">
        <div class="pro_l">
          <van-checkbox
            v-model="item.isChecked"
            :icon-size="iconSize"
            @click="updateSelectAll(item.sku_id)"
          ></van-checkbox>
          <div class="imgBox">
            <img :src="item.image" alt="" class="img" />
          </div>
        </div>
        <div class="pro_r">
          <div class="pro_name text_e text_e-2">
            {{ item.title }}
          </div>
          <div class="pro_desc text_e text_e-2">
            {{ item.skuTxt }}
          </div>
          <div class="pro_bottom">
            <div class="price">
              ￥<span class="priceTxt">{{ item.price }}</span>
            </div>
            <div class="num">
              <van-icon name="clear" @click="del(item)" v-if="isManage"/>
              <van-stepper v-model.number="item.count" button-size="24px" v-else/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast,Dialog } from 'vant';
export default {
  name: "shop",
  props: {
    shopItem: {
      type: Object,
      required: true,
    },
    isManage: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      iconSize: "18px",
      selectAll: false,
      selectedData: [],
    };
  },
  computed: {
    items() {
      return this.shopItem && this.shopItem.list;
    },
    round() {
      return (num, n) => {
        return Math.round(num * Math.pow(10, n)) / Math.pow(10, n);
      };
    },
    total() {
      let total = [];
      this.items.forEach((item) => {
        if (item.isChecked) {
          total.push(item.count * item.price);
        }
      });
      if (total.length > 0) {
        return this.round(
          total.reduce((prev, next) => prev + next),
          2
        );
      } else {
        return 0;
      }
    },
  },
  mounted() {},
  methods: {
    // 删除
    del(item) {
      Dialog.confirm({
        title: "删除提示",
        message: `您确定要删除${item.title}这条数据吗？`,
      })
        .then(() => {
          this.$emit('del',item.sku_id)
          // on confirm
        })
        .catch(() => {
          // Toast.fail('取消删除')
          // on cancel
        });
    },
    // 切换店铺全选按钮的状态：父级点击按钮后来改变子级
    change() {
      this.$emit("handleSelectAllChild");
    },
    toggleAll() {
      let list = this.items;
      if (!this.selectAll) {
        list.forEach((element) => {
          element.isChecked = false;
        });
        this.selectedData = [];
      } else {
        list.forEach((element) => {
          element.isChecked = true;
          if (this.selectedData.indexOf(element.sku_id) < 0) {
            this.selectedData.push(element.sku_id);
          }
        });
      }
      this.change();
    },
    /* 用于父级来控制子级:全选 */
    chooseAll() {
      let list = this.items;
      list.forEach((element) => {
        element.isChecked = true;
        if (this.selectedData.indexOf(element.sku_id) < 0) {
          this.selectedData.push(element.sku_id);
        }
      });
      this.selectAll=true
      this.change();
    },
    /* 用于父级来控制子级:全不选 */
    chooseAllNot() {
      let list = this.items;
      list.forEach((element) => {
        element.isChecked = false;
      });
      this.selectedData = [];
      this.selectAll=false
      this.change();
    },
    updateSelectAll(id) {
      if (this.selectedData.indexOf(id) > -1) {
        this.remove(this.selectedData, id);
      } else {
        this.selectedData.push(id);
      }
      if (this.selectedData.length < this.items.length) {
        this.selectAll = false;
      } else {
        this.selectAll = true;
      }
      this.change();
    },
    //数组删除
    remove(arr, val) {
      var index = arr.indexOf(val);
      if (index > -1) {
        arr.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped src="@/assets/styles/shop.scss"></style>
